<template>
  <div class="container">
    <div id="mapcontainer"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
const shipMarkerLists = [
  {
    name: '小葱香又香',
    cog: 15,
    status: '作业',
    lnglat: [87.303531, 43.864082],
  },
  {
    name: '小葱香又香地方风味',
    cog: 45,
    status: '作业',
    lnglat: [112.553459, 37.906912],
  },
  {
    cog: 105,
    status: '到达',
    name: '小葱香又香范围分区大苏打',
    lnglat: [107.070948, 29.811569],
  },
  {
    cog: 240,
    status: '在途',
    name: '小葱香又香山豆根士大夫',
    lnglat: [102.498876, 24.908005],
  },
  {
    cog: 300,
    status: '在途',
    name: '小葱香又香',
    lnglat: [110.537334, 21.062074],
  },
  {
    cog: 0,
    status: '到达',
    name: '小葱香又香',
    lnglat: [119.665199, 26.484052],
  },
  {
    cog: null,
    status: '在途',
    name: '小葱香',
    lnglat: [118.643689, 31.906187],
  },
  {
    cog: 180,
    status: '作业',
    name: '小葱',
    lnglat: [121.466695, 31.415172],
  },
]
let shipMarkerContainer;
export default {
  name: 'WorkspaceJsonPractice01',

  data() {
    return {
      map: {}
    }
  },

  mounted() {
    this.initAMap()
  },

  methods: {
    initAMap() {
      AMapLoader.load({
        key: 'd6cf2cc68b5303fa4efb236b18dfc020', //设置您的key
        version: '1.4.15' //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          // const layer = new AMap.createDefaultLayer({
          //   // 提示：参数值并不是API默认使用的值
          //   zooms: [3, 20], //可见级别
          //   visible: true, //是否可见
          //   opacity: 1, //透明度
          //   zIndex: 0 //叠加层级
          // })
          this.map = new AMap.Map('mapcontainer', {
            viewMode: '2D', // 默认使用 2D 模式
            zooms: [5, 20], //初始化地图层级
            center: [116.397428, 39.90923], //初始化地图中心点
            layers: [new AMap.TileLayer.Satellite({ zIndex: 10 }), new AMap.TileLayer({ zIndex: 20, })]
          })

          this.setData(AMap)
          // // 设置一个图标对象
          // const icon = {
          //   type: 'image', // 图标类型，现阶段只支持 image 类型
          //   image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png', // 图片 url
          //   size: [64, 30],// 图片尺寸
          //   anchor: 'center', // 图片相对 position 的锚点，默认为 bottom-center 
          // };

          // // 设置文字对象
          // const text = {
          //   content: '中邮速递易', // 要展示的文字内容
          //   direction: 'left', // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
          //   offset: [-20, -5], // 在 direction 基础上的偏移量
          //   style: { // 文字样式       
          //     fontSize: 12,// 字体大小        
          //     fillColor: '#22886f', // 字体颜色  
          //     strokeColor: '#fff', // 描边颜色
          //     strokeWidth: 2,  // 描边宽度
          //   }
          // }

          // // 创建 LabelMarker 实例
          // const labelMarker = new AMap.LabelMarker({
          //   name: '标注2', // 此属性非绘制文字内容，仅最为标识使用
          //   position: [116.441504,40.031386,116.466426,39.971294,116.443838,39.723097,116.470679,40.020576,116.522323,40.042006,116.395659,39.797351,116.118438,39.788421,116.306554,40.051124,116.410109,39.863089,116.237956,39.856638,116.414847,39.872101,116.378096,39.862151,116.374007,39.907619,116.264677,39.906542,116.374771,40.10086,116.689728,40.019175,116.374144,39.883654],
          //   zIndex: 16,
          //   icon: icon, // 将第一步创建的 icon 对象传给 icon 属性
          //   text: text,// 将第二步创建的 text 对象传给 text 属性
          // });

          // // 创建 LabelsLayer 图层
          // const labelsLayer = new AMap.LabelsLayer({
          //   zooms: [3, 20],
          //   zIndex: 1000,
          //   collision: true,  // 该层内标注是否避让
          //   allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
          // });

          // // 添加一个 labelMarker
          // labelsLayer.add(labelMarker);

          // this.map.add(labelsLayer);

          // labelMarker.on('mousein', function () {
          //   labelMarker.setOpacity(0.5);
          // });

        })
        .catch((e) => {
          console.log(e)
        })
    },
    setData(LocalAMap){
      let style = [];

      let shipIcon1 = require('../../assets/water_l_1.png')
      let shipIcon2 = require('../../assets/water_l_2.png')
      let shipIcon3 = require('../../assets/water_l_3.png')

      // console.log(LocalAMap.MassMarks)
      shipMarkerLists.forEach((v, i) => {
        let icon = null;
        if (v.status.trim() == '作业') { // 作业
          icon = shipIcon1
        } else if (v.status.trim() == '在途') { // 在途
          icon = shipIcon2
        } else if (v.status.trim() == '到达') { // 到达
          icon = shipIcon3
        } else {
          icon = shipIcon1
        }
        // const rotation = (v.cog * Math.PI) / 180;
        style.push({
          url: icon,
          size: new LocalAMap.Size(12, 22),
          anchor: new LocalAMap.Pixel(3, 3),
          rotation: v.cog
        })
        v.style = i;
        console.log('style-=--',style)
      })

      shipMarkerContainer = new LocalAMap.MassMarks(shipMarkerLists, {
        zIndex: 249,
        style
      })
      console.log('shipMarkerContainer',shipMarkerContainer)
      shipMarkerContainer.setMap(this.map);
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
}
#mapcontainer {
  height: 100%;
  width: 100%;
}
</style>

<style lang="scss">
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}

.custom-content-marker .close-btn:hover {
  background: #666;
}
</style>
